<template>
  <ActionPanel :loading="loading">
    <OrganizationAction v-if="detail?.owner == 'organization'" :detail="detail" />
    <UserAction v-if="detail?.owner == 'user'" :detail="detail" />
    <template #footer>
      <div class="flex justify-center items-center">
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </ActionPanel>
</template>
<script setup lang="ts">
  import { ElButton } from 'element-plus'
  import { getApi } from '@/seed-application/api'  
  import { ref, onMounted, inject } from 'vue'
  import { Action } from '@/seed-application/types'
  import UserAction from './UserAction.vue'
  import OrganizationAction from './OrganizationAction.vue'
  import { ActionPanel } from '@/components/ActionPanel'
  import { closePopupKey } from '@/components/Popup'

  const props = defineProps<{action: Action, id: string}>()
  const action = props.action

  const close = inject<() => void>(closePopupKey, void 0)
  const loading = ref(false)

  const detail = ref()
  onMounted(async () => {
    loading.value = true
    detail.value = await getApi(action, props.id)
    loading.value = false
  })
</script>